import {defineComponent, Fragment, computed, watch} from 'vue'
import { ElButton as Button } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import { ArrayItems, Form, Input, FormItem } from '@formily/element-plus'
import { createForm, Form as FormCore } from '@formily/core'
import { observer } from '@formily/reactive-vue'
import { createSchemaField } from '@formily/vue'
import { ValueInput } from '@pg/settings-form'
import { Header } from './Header'
import { usePrefix, TextWidget } from '@pg/prototypes'
import { traverseTree } from './shared'
import { ITreeDataSource } from './types'
import './styles.less'

const {SchemaField, SchemaObjectField, SchemaArrayField, SchemaStringField, SchemaVoidField} = createSchemaField({
  components: {
    FormItem,
    Input,
    ArrayItems,
    ValueInput,
  },
})

export interface IDataSettingPanelProps {
  treeDataSource: ITreeDataSource
  allowExtendOption?: boolean
  effects?: (form: FormCore<any>) => void
}

export const DataSettingPanel = observer(
  defineComponent({
    props: ['allowExtendOption', 'effects', 'item'],
    setup(props) {
      const { allowExtendOption, effects } = props
      const prefix = usePrefix('data-source-setter')
      const form = computed(() => {
        const item = props.item
        console.log(item)
        return createForm({
          values: item || {},
          effects: effects,
        })
      })
      // watch(() => props.item, (newVal) => {
      //   console.log(newVal)
      // })
      // const form = computed(() => {
      //   let values: any
      //   traverseTree(props.treeDataSource.dataSource, (dataItem) => {
      //     if (dataItem.key === props.treeDataSource.selectedKey) {
      //       values = dataItem
      //     }
      //   })
      //   return createForm({
      //     values,
      //     effects: effects,
      //   })
      // })
      // if (!props.treeDataSource.selectedKey) {
      //   return () => (
      //     <Fragment>
      //       <Header
      //         title={
      //           <TextWidget token="SettingComponents.DataSourceSetter.nodeProperty" />
      //         }
      //         extra={null}
      //       />
      //       <div className={`${prefix.value + '-layout-item-content'}`}>
      //         <TextWidget token="SettingComponents.DataSourceSetter.pleaseSelectNode" />
      //       </div>
      //     </Fragment>
      //   )
      // }
      return () => (
        <Fragment>
          <Header
            title={
              <TextWidget token="SettingComponents.DataSourceSetter.nodeProperty" />
            }
            extra={
              (allowExtendOption && props.item) ? (
                <Button
                  link={true}
                  onClick={() => {
                    form.value?.setFieldState('map', (state) => {
                      state.value.push({})
                    })
                  }}
                  icon={<Plus />}
                >
                  <TextWidget token="SettingComponents.DataSourceSetter.addKeyValuePair" />
                </Button>
              ) : null
            }
          />
          <div className={`${prefix.value + '-layout-item-content'}`}>
            <Form form={form.value} labelWidth={60} wrapperWidth={160}>
              <SchemaField>
                <SchemaArrayField name="map" x-component="ArrayItems">
                  <SchemaObjectField
                    x-decorator="ArrayItems.Item"
                    x-decorator-props={{ type: 'divide' }}
                  >
                    <SchemaStringField
                      title={
                        <TextWidget token="SettingComponents.DataSourceSetter.label" />
                      }
                      x-decorator="FormItem"
                      x-disabled={!allowExtendOption}
                      name="label"
                      x-component="Input"
                    />
                    <SchemaStringField
                      title={
                        <TextWidget token="SettingComponents.DataSourceSetter.value" />
                      }
                      x-decorator="FormItem"
                      name="value"
                      x-component="ValueInput"
                    />
                    <SchemaVoidField
                      x-component="ArrayItems.Remove"
                      x-visible={allowExtendOption}
                      x-component-props={{
                        style: {
                          margin: 5,
                          display: 'flex',
                          justifyContent: 'center',
                          alignItems: 'center',
                        },
                      }}
                    />
                  </SchemaObjectField>
                </SchemaArrayField>
              </SchemaField>
            </Form>
          </div>
        </Fragment>
      )
    }
  })
)
